当我们说line-height时候,都会谈论到神马

作为一个初入前端的小鲜肉,这几天被line-height折腾得够呛
所以本着 你丫欺负我,我就刨你家祖坟的精神 今天就查查你家户口本

文中如果有什么不对的地方加我QQ387857274欢迎指正哦,前端爱好者也可以加一下,相互交流嘛
个人认为,要想把这货彻底弄清楚就要,得先认识一下'基线'

什么是基线

红色这条线就是基线

是不是很像英语作业本中的线格,没错就是那玩意
基线就是用来定位文字在一行中的显示位置,也就是说,一旦一行的基线的位置固定了,文字的位置也就固定了

line-height与基线的关系

讲一讲绿线是什么鬼

绿线其实是我意淫出来的0.0

绿线的用处主要就是确定每行content_area,应该和好多文章中所提到的行内框相似

绿线的跨度是由该行内font-size最大的那个元素决定
绿线的跨度的改变也会影响基线的位置好比姚明很高,所以他的屁股也会很高

绿线跟line-height有什么关系

上方区域和下方区域的高度是一致的,我手残只能这样了

那么上方区域或者下方区域是如何计算的呢,就是((line-height)-绿线的跨度)/2
也就是说这行的上方区域和上一行的下方区域共同组成行间距一号,同样下方区域和下一行的上方区域组成行间距二号

好吧这里好像跟基线并没有半毛钱关系,我承认,不过也可认为是姚明和他屁股的关系,line-height 会决定本行的位置,同时也就是会影响基线

基线会影响谁呢

大家都知道,有inline,inline-block,block三种东西

一. inline我们把它看做一个由内容撑开的元素,被基线影响

二. inline-block中存在基线,其中的inline元素也被基线影响,不过inline-block会继承父元素的line-height

这里大家可能会产生疑问,看图,红色是父级元素p
p设置line-height之前

p设置line-height:600px后;两个盒子的基线被拉到下面

这里有一些关于一行的基线到底归谁管的问题,请往下看

三. block跟inline-block是一样一样的区别在于block这货一下占一行

一行的基线到底归谁管

你可以笼统地说是line-height,这句话本身是没什么问题的,不过现实情况要比想象的要复杂一点,还有就是图片和空的inline-block也会影响基线的位置(很诡异吧,我也觉得)

情况1

还是上面的图,当两个inlin-block不设置任何line-height的时候 > p元素设置line-height:600px;可以看到第一行的基线沉下去了

情况2

当只有黄色inline-block设置line-height的时候,同时绿色的本身> 基线会向整体基线靠拢

情况3

当两个货都设置不同的line-height呢绿色会调整自己的位置使自身基线向行基线靠拢

情况4

当存在空的inline-bolck时,也会把基线下沉

情况5

当行中加入图片后,本行的基线会随图片的高度而下沉,其它元素的基线也同时超主基线靠拢

这里得到的结论是:该行的line-height最终结果是子元素中最大的line-height,然后其它元素的line-height设置完成之后基线会朝整行基线靠拢
心得就是还是慎用inline-block,个人认为float比inline-block好太多,能不用就不用
以上都是个人观点

这是我研究一早上的结果,想交流的小伙伴可以加我qq387857274,共同进步
关于更详细的知识内容见下面的参考资料
参考链接
CSS深入理解之line-height

CSS行高